<template>
  <div class="fileContainer">
    <div @click="handlePreview">
      <a-icon type="file-text" style="margin: 0 10px; color: #70b603" />
      <span>{{ handleUrl }}</span>
    </div>
    <a-icon type="download" style="margin: 0 20px" v-if="showDownloadIcon" @click="handleDownload" />
    <a-icon type="delete" style="margin-right: 20px" v-if="showRemoveIcon" @click="handleDelete" />
  </div>
</template>

<script>
  import { Base64 } from 'js-base64'
  export default {
    props: {
      fileUrl: {
        type: String,
        default: ''
      },
      showRemoveIcon: {
        type: Boolean,
        default: true
      },
      showDownloadIcon: {
        type: Boolean,
        default: true
      }
    },
    computed: {
      handleUrl(){
        return this.fileUrl && this.fileUrl.split('/') && this.fileUrl.split('/').pop()
      }
    },
    methods: {
      handlePreview(){
        let base = `${window._CONFIG['onlinePreviewDomainURL']}?url=`
        let url = base+encodeURIComponent(Base64.encode(this.fileUrl))
        window.open(url, '_blank')
      },
      handleDownload(){
        var a = document.createElement('a') // 创建一个<a></a>标签
        a.href = this.fileUrl         //重点（如测试发现下载文件不存在/找不到，检查路径）
        a.download = this.fileUrl         // 设置下载文件文件名
        a.target = '_blank'; 
        a.style.display = 'none'           // 隐藏a标签
        document.body.appendChild(a)       // 将a标签追加到文档对象中
        a.click()                          // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
        a.remove() 
      },
      handleDelete(){}
    }
  }
</script>

<style lang="less" scoped>
.fileContainer {
  display: flex;
  width: 100%;
  align-items: center;
  div {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .anticon{
    cursor: pointer;
  }
}
</style>